<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-header</title>
</head>
<style>
    html, body {
        border: 0;
        /* overflow: hidden; */
    }
    /* 最顶部导航栏 */
    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
        text-decoration: none;
        color: inherit;
    }
    button{
        border: 0;
        margin: 0;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }
    body {
        margin: 0;
        padding: 0;

    }
    header {
        position: fixed;
        top: 5%;
        left: 50%;    
        transform: translate(-50%, -5%);
        padding: 20px;
        border-radius: 15px;
        width: 1200px;
        height: 30px;
        background-color: rgba(128, 128, 128, 0.5);
        z-index: 1000;
        transition: width 0.5s ease, height 0.5s ease, top 0.5s ease 
    }

    header.right button:hover {
        font-size: 25px;
    }

    .left {
        font-size: 28px;
        font-family: 'Times New Roman', Times, serif;
    }

    nav {
        display: flex;
        justify-content: space-between;
        /* float: left; */
    }

    nav button {
        font-family: 'Times New Roman', Times, serif;
        font-size: 18px;
        color: #fff;
        margin-left: 20px;
        transition: font-size 0.3s ease; 
    }
    nav button:hover {
        align-content: center;
        color: rgba(1, 1, 1, 0.8);
    }
    .middle {
        display: flex;
        gap: 15px;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;

    }

    .middle button:hover{
        font-size: 25px;
    }
    .right {
        display: flex;
        justify-content: flex-end;
        padding-right:20px;
    }
    .login {
        border-radius: 5px;
        padding: 5px;
        background: #000;
        margin-left: 20px;
    }
    .login:hover {
        font-size: bold;
        background: #1f8bc9;
    }
    header.shrink{
        top: 0;
        width:  100vw;
        border-radius: 0%; 
        transition: top 0.5s ease, width 0.5s ease; 
        
    }
</style>
<body>
    <header>
        <nav>
            <button class="left">First Blog</button>
            <div class="middle">
                <button onclick="navigateTo('home')">🏠首页</button>
                <button onclick="navigateTo('study')">📚学习日常</button>
                <button onclick="navigateTo('view')">🖼️家乡美景</button>
                <button onclick="navigateTo('travel')">📸旅行日志</button>
                <button onclick="navigateTo('message')">📬留言</button>
                <button onclick="navigateTo('about')">🔗关于</button>
            </div>
            <div class="right">
                <button class="login" onclick="navigateTo('login')">登录/注册</button>
            </div>
        </nav>
    </header>
<div style="height: 1000px;"></div>
<script>
    window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {  // 当页面滚动超过50px时
        header.classList.add('shrink');  // 增加shrink类
    } else {
        header.classList.remove('shrink');  // 移除shrink类
    }
});
</script>
</body>

</html>